@extends('mobile.layout')
@php
    $layout_header = 0;

@endphp

@section('style')
    @parent

    <link rel="stylesheet" href="{{ asset('static/mobile/less/goods.css') }}?v={{ app('cache.config')->get('asset_version') }}">
    <style>
        .footer-fuqi{
            height: 2rem!important;
        }
        .red-pan {
            color: #d72525;
        }
        .swal2-container.swal2-center>.swal2-popup{
            font-size: 12px;
        }
    </style>
@stop
@section('holder')
@stop

@section('script')
    @parent
    <script src="{{ asset('static/js/lottie_svg.min.js') }}"></script>
    <script src="{{ asset('static/js/jquery.form.js') }}"></script>
    <script src="{{ asset('static/js/sweetalert2.js') }}"></script>
    <script src="{{ asset('static/js/relx.js') }}"></script>
    <script>
        var cart_min = cart_num_min;
        var cart_max = cart_num_max;
        var price_show = {{ $product->price }}
        checkReduceAddStatus();

        $('.cart-reduce2').click(function(){
            var num = parseInt($("input[name='cart_num_shw']").val());
            if(num<=cart_min){
                checkReduceAddStatus();
                return false;
            }else{
                var new_num = num-1;
                $("input[name='cart_num_shw']").val(new_num);
                checkReduceAddStatus();
            }
        });

        $('.cart-add2').click(function(){
            var num = parseInt($("input[name='cart_num_shw']").val());
            if(num>=cart_max){
                checkReduceAddStatus();
                return false;
            }else{
                var new_num = num+1;
                $("input[name='cart_num_shw']").val(new_num);
                checkReduceAddStatus();
            }
        });



        function checkReduceAddStatus(){
            var num = parseInt($("input[name='cart_num_shw']").val());

            if(num<=cart_min){
                $('.cart-reduce2').addClass('cart-disable')
            }else{
                $('.cart-reduce2').removeClass('cart-disable')
            }

            if(num>=cart_max){
                $('.cart-add2').addClass('cart-disable')
            }else{
                $('.cart-add2').removeClass('cart-disable')
            }

            var p = parseInt(price_show)
            $('#show-desc-price').text(p*num);

        }




        $('#add-cart-btn').click(function(){
            var id = $(this).attr('data-id');
            var num = $('#cart_num').val();

            if($(this).attr('data-disable') == 1){
                return false;
            }
            effect($(this));
            actionCart(id,num,'add');
            $('#cart-show-box').click()
        })

        //setCartTipsBottom(2.4)
    </script>

    <script>
        function makeOrderLogs(){
            var order_log_time = parseInt(localStorage.getItem("order_log_time"))+10;
            var current_time = Date.parse(new Date())/1000;


            var swiper_html = '';
            if(order_log_time>current_time){
                swiper_html += '<div class="swiper-slide"><p class="ol"><span class="nick">'+localStorage.getItem("order_log_nickname")+'</span><span class="time">剛剛</span></p></div>';
            }
            for(var i=0;i<10;i++){
                var str = "買家09****"+getRandomNum()+"已下單";
                var time = "剛剛";


                swiper_html += '<div class="swiper-slide"><p class="ol"><span class="nick">'+str+'</span><span class="time">'+time+'</span></p></div>';
            }
            $('#order-logs-swiper').find('.swiper-wrapper').html(swiper_html);


        }
        makeOrderLogs();
        function getRandomNum(){
            var randomNum = Math.random()

            var checkCode = randomNum*9000
            checkCode +=1000;
            return parseInt(checkCode)
        }

        function getRandomInt(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }

        var is_run = false;
        setInterval(function(){
            var time = getRandomInt(6,18)*1000;


            if(!is_run){
                is_run = true;

                setTimeout(function(){
                    localStorage.removeItem("order_log_time");
                    $('#order-logs-next').click();
                    is_run=false;

                },time)
            }


        },1000)


        var current_order_buy_num = parseInt(localStorage.getItem("order_buy_num"));
        if(current_order_buy_num){
            $('#buy_num').text(current_order_buy_num);
        }


        var mySwiper = new Swiper('#order-logs-swiper', {
            autoplay: false,
            loop:true,
            simulateTouch : false,
            allowTouchMove: false,
            direction: 'vertical',
            observer: true,
            navigation: {
                nextEl: '#order-logs-next',
            },
            on: {
                slideChangeTransitionStart: function(swiper){
                    var str = $('#order-logs-swiper .swiper-slide').eq(this.activeIndex).find('.nick').text();
                    localStorage.setItem("order_log_nickname",str);

                    var order_buy_num = parseInt(localStorage.getItem("order_buy_num"));
                    if(!order_buy_num){
                        order_buy_num = parseInt($('#buy_num').text());

                    }


                    var order_log_time = parseInt(localStorage.getItem("order_log_time"))+10;
                    var current_log_time = Date.parse(new Date())/1000;
                    if(!order_log_time || current_log_time>order_log_time){
                        localStorage.setItem("order_log_time",Date.parse(new Date())/1000);
                        localStorage.setItem("order_buy_num",order_buy_num+1);

                        $('#buy_num').text(order_buy_num+1);
                    }





                },
            },
        })
    </script>

    <script>
        var tab_top = $('.tab-manager').offset().top;
        tabPos();
        $(window).scroll(function(event){
            tabPos();
        });
        function tabPos(){
            var curr_top = $(document).scrollTop();
            if(curr_top>=tab_top){
                $('.tab-manager').addClass('full')
            }else{
                $('.tab-manager').removeClass('full')
            }
        }
        $('.single-tab').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
        });
    </script>

    <script>
        dynamicFreight();
        setInterval(function () {
            dynamicFreight();

        },1000)
        function dynamicFreight(){
            var cart_price = $.cookie('cart_total_price');
            if(!cart_price || cart_price<=0){
                $('.dynamic-freight').text('購物滿NT$3000享受免費配送服務');
            }else{
                if(cart_price>=free_shipping_where){
                    $('.dynamic-freight').text('已享受免費配送服務');
                }else{
                    var phase = free_shipping_where-cart_price;
                    $('.dynamic-freight').text('多買NT$'+phase+'享受免費配送服務');
                }
            }
        }

        $('.thumbnail-img li').click(function(){
            $(this).addClass('act').siblings().removeClass('act');
            var src = $(this).find('img').attr('src');
            $('.main-img-wrap img').attr('src',src);
        });
    </script>
    <script>
        var page = 5;

        var currentPage = 1;
        var count = $('.rev').length;
        var pageNumber = Math.ceil(count/page);

        var pageLinkRender = function () {
            $('.history').append('<ul class="paging" id="paging"></ul>')
            var temp = '<li class="prev"><svg t="1695783674431" class="previcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4168" width="200" height="200"><path d="M563.626667 490.666667L298.666667 229.376 358.186667 170.666667 682.666667 490.666667 358.186667 810.666667 298.666667 751.957333z" p-id="4169"></path></svg></li>';
            for (var i=0;i<pageNumber;i++){
                temp += '<li class="turn '+(i==0?'active':'')+'" data-page="'+(i+1)+'"><span>'+(i+1)+'</span></li>'
            }
            temp += '<li>···</li><li class="next"><svg t="1695783674431" class="nexticon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4168" width="200" height="200"><path d="M563.626667 490.666667L298.666667 229.376 358.186667 170.666667 682.666667 490.666667 358.186667 810.666667 298.666667 751.957333z" p-id="4169"></path></svg></li>';
            $('#paging').html(temp)
        }
        if(pageNumber>1){
            //pageLinkRender();
        }
        $('.rev').hide();
        var showLinkPage = function (show_page) {
            //
            var show_page = parseInt(show_page);
            for(var i=0;i<page;i++){
                var eq = i+(show_page-1)*page
                var rev = $('.rev').eq(eq);
                if(rev){
                    rev.show();
                }
            }
            currentPage = show_page;

            $("[data-page='"+show_page+"']").addClass('active').siblings().removeClass('active');


            $('#paging .prev').removeClass('disabled')
            $('#paging .next').removeClass('disabled')
            if(currentPage <= 1){
                $('#paging .prev').addClass('disabled');
            }
            if(currentPage >= pageNumber){
                $('#paging .next').addClass('disabled');
            }

        }
        showLinkPage(1);
        $('#paging .turn').click(function () {
            if(!$(this).hasClass('active')){
                var show_page = $(this).attr('data-page');
                showLinkPage(show_page);

            }
        })

        $('#paging .next').click(function () {
            var nextPage = currentPage+1;
            if(nextPage<=pageNumber){
                showLinkPage(nextPage)
            }

        })

        $('#paging .prev').click(function () {
            var prevPage = currentPage-1;
            if(prevPage>=1){
                showLinkPage(prevPage)
            }

        })

        $('.lord-more').click(function (){
            var nextPage = currentPage+1;
            if(nextPage<=pageNumber){
                showLinkPage(nextPage)
            }

            if(nextPage==pageNumber){
                $('.lord-more').hide();
            }

        })


    </script>
    <script>
        let iconUp = document.querySelectorAll('.up');
        for (var i = 0; i < iconUp.length; i++) {
            let animationUp = bodymovin.loadAnimation({
                container: iconUp[i],
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: "/static/json/thumbUp.json"
            });

            var id = $(iconUp[i]).attr('data-id');
            var storage_key = 'comment_like_'+id;
            if(localStorage.getItem(storage_key)){
                $(iconUp[i]).attr('data-like',1);
                animationUp.setDirection(1);
                animationUp.play();
            }

            iconUp[i].addEventListener('click', (e) => {
                var _this = $(e.target).parents('.awesome');
                var id = _this.attr('data-id');
                var up = parseInt(_this.attr('data-up'));
                var storage_key = 'comment_like_'+id;
                if(_this.attr('data-like')){
                    var directionUp = -1;
                    _this.removeAttr('data-like');
                    localStorage.removeItem(storage_key);
                    up--;
                }else{
                    var directionUp = 1;
                    _this.attr('data-like',1);
                    localStorage.setItem(storage_key,1);
                    up++;

                }
                _this.attr('data-up',up)
                $.ajax({
                    url: '/api/comment/up',
                    type: 'POST',
                    data : {id:id,like:directionUp,_token:"{{ csrf_token() }}"},
                    dataType: 'json',
                });
                _this.next('.up-num').text("("+up+")")


                animationUp.setDirection(directionUp);
                animationUp.play();

            });
        }


    </script>
    <script>
        var is_show_write_comment = 0;
        $('.write-btn').click(function(){
            if(is_show_write_comment == 0){
                $(this).text('下次評價');
                $(this).removeClass('write-btn')
                $(this).addClass('write-cancel')
                $('.write-wrap').addClass('-show')
                is_show_write_comment = 1;
            }else{
                $(this).html(`
                    <span>我要評價</span>

                    <svg t="1698290425926" class="writeicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21246" width="200" height="200">
                        <path d="M172.397714 709.339429h124.269715l432.493714-432.493715-124.342857-124.342857L172.470857 585.142857v124.269714z m144.091429 96.109714H124.342857a48.054857 48.054857 0 0 1-48.054857-48.054857V565.174857c0-12.726857 5.046857-24.941714 14.043429-34.011428l480.548571-480.548572a48.054857 48.054857 0 0 1 67.949714 0l192.219429 192.219429a48.054857 48.054857 0 0 1 0 68.022857l-480.548572 480.548571a48.054857 48.054857 0 0 1-33.938285 14.043429z m586.313143 192.219428H121.197714a48.054857 48.054857 0 1 1 0-96.109714h781.604572a48.054857 48.054857 0 1 1 0 96.109714z" fill="" p-id="21247"></path>
                    </svg>
                `);
                $(this).addClass('write-btn')
                $(this).removeClass('write-cancel')
                $('.write-wrap').removeClass('-show')
                is_show_write_comment = 0;
            }
        })
        var current_star_eq = 4;

        $('.stars.hover').find('i').hover(function(){
            $(this).html('&#xe9a1;');
            $(this).prevAll().html('&#xe9a1;')
            $(this).nextAll().html('&#xe9a2;');
        });

        $('.stars.hover').mouseleave(function(){
            var star_elem = $(this).find('i').eq(current_star_eq);

            star_elem.html('&#xe9a1;');
            star_elem.prevAll().html('&#xe9a1;')
            star_elem.nextAll().html('&#xe9a2;');
        });

        $('.stars.hover').find('i').click(function(){
            $(this).html('&#xe9a1;');
            $(this).prevAll().html('&#xe9a1;')
            $(this).nextAll().html('&#xe9a2;');
            var star = parseInt($(this).attr('data-star'));
            $("input[name='star']").val(star);
            current_star_eq = star-1;
        });

        $("#comment-form").submit(function(){

            $("#comment-form").ajaxSubmit({
                dataType:'json',
                beforeSubmit:function(){
                    addLoadingActionBtn('.submit-btn');
                },
                success:function(data){
                    $('.write-btn').click();
                    Swal.fire({
                        title: "評價成功",
                        text: "該評價稍後將會公開",
                        icon: 'success',
                        confirmButtonText: '我知道了'
                    })

                },
                error:function(xmlHttpRequest){
                    var responseJSON = xmlHttpRequest.responseJSON;
                    var status = xmlHttpRequest.status;
                    Swal.fire({
                        title: responseJSON.message,
                        icon: 'error',
                        confirmButtonText: '我知道了'
                    })
                },
                complete:function(){
                    closeLoadingActionBtn('.submit-btn');
                },
                clearForm:true,
            });
            return false;
        })
    </script>
@stop

@section('content')
    <section class="goods-container">
        <div class="tab-manager">
            <ul>
                <li class="single-tab active">
                    <a href="#product">產品介紹</a>
                </li>
                <li class="single-tab">
                    <a href="#delivery">配送/付款</a>
                </li>
                <li class="single-tab">
                    <a href="#comments">買家評價</a>
                </li>
            </ul>
        </div>
        <div class="wrapper">
            <div class="product-template" id="product">
                <div class="thoroughfare">
                    <div class="product-media">
                        <div class="main-img-wrap">
                            <img src="{{ asset_upload($product->img) }}" alt="{{ $product->name }}">
                        </div>
                        {{--@if($product->details_cover)
                            <ul class="thumbnail-img">
                                <li class="act"><img src="{{ asset_upload($product->img) }}" alt="{{ $product->name }}"></li>
                                <li><img src="{{ asset_upload($product->details_cover) }}" alt="{{ $product->name }}"></li>
                            </ul>
                        @endif--}}
                    </div>
                </div>

                <div class="info-wrapper">
                    <h1 class="title">{{ $product->name }}</h1>
                    <div class="prices">

                        <span class="now">NT$ {{ number_format(round($product->price)) }}</span>
                        @if($product->market_price>0)
                            <span class="market">NT$ {{ number_format(round($product->market_price)) }}</span>
                        @endif
                    </div>
                    <p class="subtitle">
                        {{ $product->subtitle }}
                    </p>
                    @if($product->cate_id == 30 || $product->cate_id == 31)
                        <div class="taste">
                            <div class="taste-item ">
                                <p class="taste-title">濃郁度 / Intensity</p>

                                <p class="taste-speed">
                                    @php
                                        $extent = $product->sweet_extent;
                                    @endphp
                                    @for($i=0;$i<5;$i++)

                                        @if($extent>=1)
                                            <span class="dot" style="--progress:100%"></span>
                                        @else
                                            <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                        @endif
                                        @php
                                            $extent = $extent-1;
                                        @endphp
                                    @endfor

                                </p>
                            </div>

                            <div class="taste-item ">
                                <p class="taste-title">涼度 / Coolness</p>

                                <p class="taste-speed">
                                    @php
                                        $extent = $product->strong_extent;
                                    @endphp
                                    @for($i=0;$i<5;$i++)

                                        @if($extent>=1)
                                            <span class="dot" style="--progress:100%"></span>
                                        @else
                                            <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                        @endif
                                        @php
                                            $extent = $extent-1;
                                        @endphp
                                    @endfor

                                </p>
                            </div>

                            <div class="taste-item ">
                                <p class="taste-title">擊喉感 / Throat sensation</p>

                                <p class="taste-speed">
                                    @php
                                        $extent = $product->sense_extent;
                                    @endphp
                                    @for($i=0;$i<5;$i++)

                                        @if($extent>=1)
                                            <span class="dot" style="--progress:100%"></span>
                                        @else
                                            <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                        @endif
                                        @php
                                            $extent = $extent-1;
                                        @endphp
                                    @endfor

                                </p>
                            </div>

                            <div class="taste-item ">
                                <p class="taste-title">推薦度 / Recommendation</p>

                                <p class="taste-speed">
                                    @php
                                        $extent = $product->recommend_extent;
                                    @endphp
                                    @for($i=0;$i<5;$i++)

                                        @if($extent>=1)
                                            <span class="dot" style="--progress:100%"></span>
                                        @else
                                            <span class="dot" style="--progress:{{ ($extent>0?$extent:0)*100 }}%"></span>
                                        @endif
                                        @php
                                            $extent = $extent-1;
                                        @endphp
                                    @endfor

                                </p>
                            </div>

                        </div>
                    @endif
                    <div class="sales">
                        <div class="panic">
                            <span class="s1">已購</span>
                            <span class="s2"><em class="red-pan" style="font-style: normal" id="buy_num">{{ $product->fictional_sales }}</em>件</span>
                        </div>
                        <div class="order-logs">
                            <div class="swiper-container" id="order-logs-swiper">
                                <div class="swiper-wrapper">

                                </div>
                            </div>

                        </div>
                        <div style="display: none">
                            <div class="swiper-button-prev" id="order-logs-prev"></div>
                            <div class="swiper-button-next" id="order-logs-next"></div>
                        </div>
                    </div>
                    <div class="place">
                        <div class="goods-cart">
                            <div class="su-cart">

                                <input class="cart-input" id="cart-input-{{ $product->id }}" readonly name="cart_num_shw" value="1" type="text">
                                <i class="iconfont cart-reduce cart-disable">&#xe60f;</i>
                                <i class="iconfont cart-add">&#xe604;</i>
                            </div>
                            <a class="add-cart-btn event-add-cart" id="add-cart-btn" data-id="{{ $product->id }}" href="javascript:;" data-observer="加入購物袋-{{ $product->name }}">
                                <span><i class="iconfont">&#xe652;</i>加入購物袋</span>
                            </a>
                        </div>
                    </div>
                    <div class="ensures">
                        <div class="icons">
                            <span class="ioc"><i class="iconfont">&#xe65a;</i></span>
                            <span>預計交貨：{{ date('m月d日',strtotime('3 day')) }}至{{ date('m月d日',strtotime('8 day')) }}</span>
                        </div>
                        <div class="icons">
                            <span class="ioc"><i class="iconfont">&#xe658;</i></span>
                            <span class="dynamic-freight"></span>
                        </div>
                        <div class="icons">
                            <span class="ioc"><i class="iconfont">&#xe651;</i></span>
                            <span>鑑賞期7日內提供退換服務</span>
                        </div>
                        <div class="icons">
                            <span class="ioc"><i class="iconfont">&#xe8ab;</i></span>
                            <span>全程保護個資安全請安心結帳</span>
                        </div>
                    </div>

                </div>
            </div>
            @php
                $goods_images = [];
                try {

                    if($product->detail_images){
                        $goods_images = json_decode($product->detail_images,true);
                    }

                    if(!$goods_images){
                        if ($product->cate_id == 30){
                            $goods_images = app('cache.config')->get('goods_disposable_images');
                        }elseif($product->cate_id == 31){
                            $goods_images = app('cache.config')->get('goods_pods_images');
                        }elseif($product->cate_id == 32){
                            $goods_images = app('cache.config')->get('goods_host_images');
                             if(strpos($product->name,'空彈') !== false){
                                $goods_images = app('cache.config')->get('goods_bomb_images');
                             }
                        }
                        $goods_images = explode(',',$goods_images);
                    }
                }catch (\Exception $exception){

                }
            @endphp
            @if($goods_images)
                <div class="advertisement">
                    <div class="image">

                        @foreach($goods_images as $image)
                            <img src="{{ asset_upload($image) }}" alt="{{ $product->name }}">
                        @endforeach
                    </div>

                </div>
            @endif

            <div class="delivery" id="delivery">
                <p class="title">配送與付款</p>
                <div class="content">
                    <div class="col">
                        <p class="label">配送資訊</p>
                        <div class="enu">
                            @foreach($goods_delivery as $val)
                                <p>{{ array_get($val,'name') }}{{ array_get($val,'value') }}</p>
                            @endforeach

                        </div>
                    </div>
                    <div class="col">
                        <p class="label">付款資訊</p>
                        <div class="enu">
                            @foreach($goods_payment as $val)
                                <p>{{ array_get($val,'name') }}{{ array_get($val,'value') }}</p>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            @if($comments)
                <div class="comments" id="comments">
                    <div class="amount-wrap">
                        @php
                            $commentGroup = $comments->groupBy('star');
                            $star_5 = $commentGroup->get(5)?$commentGroup->get(5)->count():0;
                            $star_4 = $commentGroup->get(4)?$commentGroup->get(4)->count():0;
                            $star_3 = $commentGroup->get(3)?$commentGroup->get(3)->count():0;
                            $star_2 = $commentGroup->get(2)?$commentGroup->get(2)->count():0;
                            $star_1 = $commentGroup->get(1)?$commentGroup->get(1)->count():0;

                            $count_comment = count($comments);

                            $f_count_comment = $product->cate->comment_count+$comments->count();

                            $star_rate_5 = $count_comment?number_format($star_5/$count_comment,2)*100:0;
                            $star_num_5 = intval(round($f_count_comment*($star_rate_5/100),0));

                            $star_rate_4 = $count_comment?number_format($star_4/$count_comment,2)*100:0;
                            $star_num_4 = intval(round($f_count_comment*($star_rate_4/100),0));

                            $star_rate_3 = $count_comment?number_format($star_3/$count_comment,2)*100:0;
                            $star_num_3 = intval(round($f_count_comment*($star_rate_3/100),0));

                            $star_rate_2 = $count_comment?number_format($star_2/$count_comment,2)*100:0;
                            $star_num_2 = intval(round($f_count_comment*($star_rate_2/100),0));

                            $star_rate_1 = $count_comment?number_format($star_1/$count_comment,2)*100:0;
                            $star_num_1 = intval(round($f_count_comment*($star_rate_1/100),0));

                        @endphp
                        <div class="total-box">
                            <div class="total">
                                <p class="score-desc">買家平均評價</p>
                                <p class="score">4.{{ rand(5,9) }}</p>
                                <div class="stars">
                                    <i class="iconfont">&#xe9a1;</i>
                                    <i class="iconfont">&#xe9a1;</i>
                                    <i class="iconfont">&#xe9a1;</i>
                                    <i class="iconfont">&#xe9a1;</i>
                                    <i class="iconfont">&#xe9a3;</i>
                                </div>
                                <p class="text">共{{ $f_count_comment }}則評價</p>
                            </div>
                            <div class="histogram">
                                <div class="row">
                                    <div class="stars">
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                    </div>
                                    <div class="bar"><span class="progress" style="width: {{ $count_comment?number_format($star_5/$count_comment,2)*100:0 }}%"></span></div>
                                    <div class="percentage">{{ $star_rate_5 }}%</div>
                                    <div class="frequency">({{ $star_num_5 }})</div>
                                </div>
                                <div class="row">
                                    <div class="stars">
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                    </div>
                                    <div class="bar"><span class="progress" style="width: {{ $count_comment?number_format($star_4/$count_comment,2)*100:0 }}%"></span></div>
                                    <div class="percentage">{{ $star_rate_4 }}%</div>
                                    <div class="frequency">({{ $star_num_4 }})</div>
                                </div>
                                <div class="row">
                                    <div class="stars">
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                    </div>
                                    <div class="bar"><span class="progress" style="width: {{ $count_comment?number_format($star_3/$count_comment,2)*100:0 }}%"></span></div>
                                    <div class="percentage">{{ $star_rate_3 }}%</div>
                                    <div class="frequency">({{ $star_num_3 }})</div>
                                </div>
                                <div class="row">
                                    <div class="stars">
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                    </div>
                                    <div class="bar"><span class="progress" style="width: {{ $count_comment?number_format($star_2/$count_comment,2)*100:0 }}%"></span></div>
                                    <div class="percentage">{{ $star_rate_2 }}%</div>
                                    <div class="frequency">({{ $star_num_2 }})</div>
                                </div>
                                <div class="row">
                                    <div class="stars">
                                        <i class="iconfont">&#xe9a1;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                        <i class="iconfont">&#xe9a2;</i>
                                    </div>
                                    <div class="bar"><span class="progress" style="width: {{ $count_comment?number_format($star_1/$count_comment,2)*100:0 }}%"></span></div>
                                    <div class="percentage">{{ $star_rate_1 }}%</div>
                                    <div class="frequency">({{ $star_num_1 }})</div>
                                </div>
                            </div>
                        </div>

                        <div class="write-wrap">
                            <form id="comment-form" action="{{ url('/comment/'.$product->cate_id) }}" method="post">
                                {{ csrf_field() }}
                                <div class="group-one">

                                    <div class="form-group">
                                        <p class="lab">您的訂單編號</p>
                                        <input class="form-control" required name="number" type="tel">
                                    </div>

                                </div>



                                <div class="form-group">
                                    <p class="lab">對本次購物評分</p>
                                    <div class="stars hover pointer">
                                        <i class="iconfont" title="1 Star" data-star="1">&#xe9a1;</i>
                                        <i class="iconfont" title="2 Star" data-star="2">&#xe9a1;</i>
                                        <i class="iconfont" title="3 Star" data-star="3">&#xe9a1;</i>
                                        <i class="iconfont" title="4 Star" data-star="4">&#xe9a1;</i>
                                        <i class="iconfont" title="5 Star" data-star="5">&#xe9a1;</i>
                                    </div>
                                    <input type="hidden" name="star" value="5">
                                </div>

                                <div class="form-group">
                                    <p class="lab">評價內容</p>
                                    <textarea class="form-control" required name="content" ></textarea>
                                </div>

                                <button class="submit-btn">提交評價</button>
                            </form>
                        </div>

                        <div class="actions">
                            <a class="write-btn" href="javascript:;">
                                <span>我要評價</span>

                                <svg t="1698290425926" class="writeicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21246" width="200" height="200"><path d="M172.397714 709.339429h124.269715l432.493714-432.493715-124.342857-124.342857L172.470857 585.142857v124.269714z m144.091429 96.109714H124.342857a48.054857 48.054857 0 0 1-48.054857-48.054857V565.174857c0-12.726857 5.046857-24.941714 14.043429-34.011428l480.548571-480.548572a48.054857 48.054857 0 0 1 67.949714 0l192.219429 192.219429a48.054857 48.054857 0 0 1 0 68.022857l-480.548572 480.548571a48.054857 48.054857 0 0 1-33.938285 14.043429z m586.313143 192.219428H121.197714a48.054857 48.054857 0 1 1 0-96.109714h781.604572a48.054857 48.054857 0 1 1 0 96.109714z" fill="" p-id="21247"></path></svg>

                            </a>
                        </div>
                    </div>
                    <div class="history">
                        <p class="title">最新買家評價</p>
                        <ul class="label-box">
                            @foreach($comment_labels as $item)
                                <li class="label">{{ $item->name }}</li>
                            @endforeach

                        </ul>
                        <div class="reviews">

                            @foreach($comments as $item)
                                <div class="rev">
                                    <div class="name-box">
                                        <p class="nickname">買家09****{{ substr($item->phone,-4) }}（已購{{ $item->total_number }}單）@if($item->customer_label)<span class="fans">{{ $item->customer_label }}</span>@endif</p>

                                        <div class="star-box">
                                            <div class="stars">
                                                @for($i=1;$i<=5;$i++)
                                                    <i class="iconfont">{{ $i<=$item->star?"&#xe9a1;":"&#xe9a2;" }}</i>
                                                @endfor
                                            </div>
                                            @if($item->time)<p class="date">{{ $item->time->format('Y/m/d') }}</p>@endif
                                        </div>
                                    </div>

                                    <p class="buy-text">
                                        本次已購
                                        <span>
                                            {{ $item->buy_info }}
                                        </span>
                                    </p>

                                    <p class="content">
                                        {{ $item->content }}
                                    </p>
                                    <div class="like-box">
                                        <p class="doyou">這則評價對您有幫助嗎？</p>
                                        <div class="up awesome" data-id="{{ $item->id }}" data-up="{{ $item->up }}"></div>
                                        <span class="up-num">({{ $item->up }})</span>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                        <p class="lord-more">加載更多評價</p>
                    </div>
                </div>
            @endif

            <div class="guess">
                <p class="title">猜你喜歡</p>
                <div class="like-products">
                    @foreach($recommend as $item)
                        <div class="goods">
                            <a href="{{ url('product/'.$item->id) }}"><img class="pic" src="{{ asset_upload($item->img) }}" alt="{{ $item->name }}"></a>
                            <p class="name">{{ $item->name }}</p>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </section>

    <div class="goods-cart">
        <div class="su-cart">

            <i class="iconfont cart-reduce2">&#xe60f;</i>
            <input class="cart-input" id="cart-input-{{ $product->id }}" readonly name="cart_num_shw" value="1" type="text">
            <i class="iconfont cart-add2">&#xe604;</i>

        </div>
        <a class="add-cart-btn event-add-cart"  data-id="{{ $product->id }}" href="javascript:;"><span style="margin-right: 0.4rem">NT$ <span id="show-desc-price">{{ intval($product->price) }}</span></span><span>加入購物袋</span></a>
    </div>
@endsection
